html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#simulator-canvas {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.status-panel {
  z-index: 3;
  height: 100vh;
  overflow-y: auto;
}

#info {
  max-height: 100%;
}

#chart {
  height: 100%;
}

#chart .ct-line {
  stroke-width: 1px;
  stroke-opacity: 0.8;
}

#chart .ct-label {
  font-weight: bold;
}

#chart-container {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  box-sizing: border-box;
}

#chart-title {
  font-weight: bold;
  font-size: large;
  width: 100%;
  text-align: center;
}

@media (prefers-color-scheme: light) {
  #chart-container {
    background-color: rgba(216, 220, 225, 0.8);
  }
  #chart-title {
    color: #6c757d;
  }
}
@media (prefers-color-scheme: dark) {
  #chart-container {
    background-color: rgba(42, 48, 56, 0.856);
  }
  #chart-title {
    color: #bbc3ca;
  }
  .status-panel {
    background-color: #283542 !important;
    color: aliceblue;
  }
  div#info {
    background-color: #283542 !important;
    color: aliceblue;
  }
  #simulator-canvas {
    background-color: #354e68;
  }
  #guide {
    background-color: #5d5c5ed1;
    color: aliceblue;
  }
  #guide > ul.list-group {
    color: aliceblue;
    background-color: #5d5c5ed1 !important;
  }
  #guide > ul.list-group .list-group-item {
    color: aliceblue;
    background-color: #766b81d1 !important;
  }
  .btn-outline-secondary {
    color: aliceblue;
  }

  label.custom-file-label {
    color: aliceblue;
    background-color: #304b69;
  }
}
